<template>
<div>
  <div>
    <el-page-header @back="goBack" content="角色管理">
    </el-page-header>
  <el-button type="primary" size="small" @click="dialogFormVisible=true;title='添加角色'">添加</el-button>
  </div>
  <el-table
    :data="rolelist" 
    height="550"
    row-key="id"
    border
    stripe
    :tree-props="{children: 'children'}">
    >
    <el-table-column
      fixed
      prop="id"
      label="角色编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="rolename"
      label="角色名称"
      width="220">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="320">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="320">
      <template slot-scope="item">
        <el-button 
          @click.native.prevent="editRole(item.row.id)"
          type="primary"
          icon="el-icon-edit"
          size="small">
        </el-button>

        <el-button
          @click.native.prevent="deleteRow(item.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small">
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
        <el-input v-model="form.rolename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" :label-width="formLabelWidth">
        <el-tree
          :data="menulist"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[2]"
          ref="tree"
          check-strictly
          :props="defaultProps">
        </el-tree>
      </el-form-item>
  
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRole">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'

// 引入接口
import { roleAdd, roleDelete, roleInfo, roleEdit } from '../request/api.js'

export default {
  name: 'Users',
  computed: {
    ...mapGetters({
      menulist: 'menu/getMenu',
      rolelist: 'menu/getRole'
    })
  },
  methods: {
      deleteRow(id) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除角色接口
          roleDelete({ id }).then(res => {
            if(res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.getRole()
            } else {
              this.$message.error(res.data.msg)
            }
          })   
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      goBack() {
        this.$router.push('home')
      },
      resetForm() {
        this.dialogFormVisible = false
        this.form = {
          rolename: 0, 
          menus: '',
          status: 1, //状态   1正常2禁用
        }
      },
      // 添加或编辑角色
      addRole() {
        this.dialogFormVisible = false
        this.$refs.form.validate((val) => {
          if(val) {
            // 调用菜单添加接口
            // console.log(this.form)
            this.form.menus = this.$refs.tree.getCheckedKeys().join(',')
            if(this.isAdd){
              roleAdd(this.form).then((res) => {
                console.log(res)
                if(res.data.code == 200) {
                  this.$message.success(res.data.msg)
                  // 添加成功后重新调用列表接口
                  this.getRole()
                } else {
                  this.$message.error(res.data.msg)
                }
                this.resetForm('form')
              })  
            } else {
              roleEdit(this.form).then((res) => {
                console.log(res)
                if(res.data.code == 200) {
                  this.$message.success(res.data.msg)
                  // 添加成功后重新调用列表接口
                  this.getMenu()
                } else {
                  this.$message.error(res.data.msg)
                }
                this.resetForm('form')
              })  
            }   
                
          } else {
            console.log('shibai')
          }
        })
      },
      editRole(id) {
        this.dialogFormVisible = true
        this.title = '编辑角色'
        this.isAdd = false
      },
      ...mapActions({
        getRole: 'menu/getRoleAction',
        getMenu: 'menu/getMenuAction'
      })
    },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      title: '添加角色',
      isAdd: true,
      form: {
        rolename: '',
        status: 1,
        menus: ''
      },
      rules: {
        rolename: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      },

      defaultProps: {
          children: 'children',
          label: 'title'
        }
    }
  },
  mounted() {
    this.getRole()
    if (this.menulist.length == 0) {
      this.getMenu()
    }
    
  }
}
</script>

<style></style scoped>